<template>
  <div class="app-container">
    <el-card>
      <el-form>
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键字" :model="form" label-width="80px">
              <el-input v-model="form.keyword" placeholder="根据编号搜索"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="14">
            <el-form-item style="text-align: right;">
              <el-button size="small" @click="clearIpt">清除</el-button>
              <el-button size="small" type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-alert title="" type="info" show-icon :closable="false" style="margin-bottom:20px;">
        <span class="el-alert-title">数据一共 {{ total }} 条</span>
      </el-alert>

      <!-- 表格 -->
      <el-table :data="questionList" style="width: 100%">
        <el-table-column prop="id" label="编号" width="200"> </el-table-column>
        <el-table-column label="题型" width="80">
          <template slot-scope="scope">
            {{ scope.row.questionType | questionTypeFilter }}
          </template>
        </el-table-column>
        <el-table-column  label="题目编号" width="200">
          <template slot-scope="scope">
             <div class="number" v-for="(item,index) in scope.row.questionIDs" :key="index" @click="getDetail(item.id)">{{item.number}}</div>
          </template>
         </el-table-column>
        <el-table-column prop="addTime" label="录入时间"  width="180"> </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="133"> </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="133"> </el-table-column>
        <el-table-column prop="userName" label="录入人" width="133"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" plain circle @click="deleteQuestion(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 预览弹框 -->
           <QuestionPreview :questionsDetail="questionsDetail" :isShow="dialogVisible" @close="changedialogVisible"></QuestionPreview>

       <!-- 分页 -->
      <el-pagination
        style="text-align: right;"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="pagesize"
        layout=" prev, pager, next,sizes,jumper"
        :total="total"
      >
        >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { html2Text } from '@/utils/index'
import QuestionPreview from '../components/questions-preview'
export default {
  components: {
    QuestionPreview
  },
  data () {
    return {
      page: 1,
      pagesize: 20,
      total: 0,
      form: { keyword: '' },
      questionList: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      questionsDetail: {},
      dialogVisible: false
    }
  },
  created () {
    this.getQuestionList()
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      this.getQuestionList()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.getQuestionList()
    },
    // 获取试题列表
    async getQuestionList () {
      const res = await randoms({ page: this.page, pagesize: this.pagesize, keyword: this.form.keyword })
      this.questionList = res.data.items
      this.total = res.data.counts
    },
    // 删除试题
    deleteQuestion (row) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await removeRandoms(row)
        if (res.status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getQuestionList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 搜索试题
    async search () {
      this.getQuestionList()
    },
    // 清除搜索条件
    clearIpt () {
      this.form.keyword = ''
      this.getQuestionList()
    },
    // 题目预览
    async getDetail (id) {
      console.log(id)
      const res = await detail({ id: id })
      this.questionsDetail = res.data
      this.questionsDetail.question = html2Text(this.questionsDetail.question)
      this.questionsDetail.answer = html2Text(this.questionsDetail.answer)
      this.dialogVisible = true
    },
    changedialogVisible (val) {
      this.dialogVisible = val
    }
  }
}
</script>

<style scoped lang="scss">
.el-alert-title {
  font-size: 13px;
  line-height: 18px;
}
::v-deep .el-alert__icon.is-big {
  font-size: 16px;
  width: 16px;
}
::v-deep .el-alert__description {
  margin-top: 0;
}
.number{
  color:#0099ff;
  cursor: pointer;
}
::v-deep .el-pagination__jump {
  margin-left: 0;
}
</style>
